<template>
    <div class="contion">
        <div class="login">
            <div class="login_1">
                <span><b>欢迎回来</b></span>
                <span style="color:#E44F32"><b>鞋履趣集</b></span>
                <span style="color:#9F9E9A;font-size:18px;margin-top:20px">您好，登录后继续</span>
            </div>
            <div class="login_2">
                <van-tabs v-model:active="activeName">
                    <div style="height:30px"></div>
                    <van-tab title="密码登录" name="1">
                        <div style="margin-bottom:10px">
                            <el-input v-model="query.account" placeholder="请输入用户名" style="width:350px;height:50px;margin-bottom:20px"></el-input>
                            <el-input v-model="query.password" placeholder="请输入密码" style="width:350px;height:50px"></el-input>
                        </div>
                        <span style="color:#E44F32;margin-left:275px;" @click="forgot">忘记密码？</span>
                    <div class="login_button">
                        <el-button @click="login">登录</el-button>
                    </div>
                    <div class="login_2_1">
                        <span style="color:#E44F32;font-size:18px;">访客使用</span>
                    </div>
                    </van-tab>
                    <van-tab title="短信登录" name="2">
                        <div>
                            <el-input v-model="phone" placeholder="请输入手机号" style="width:350px;height:50px;margin-bottom:20px"></el-input>
                            <el-input v-model="code" placeholder="请输入验证码" style="width:270px;height:50px"></el-input>
                            <el-button style="width:80px;height:50px" @click="send">发送验证码</el-button>
                            </div>
                            <div class="login_button">
                                <el-button @click="codelogin">登录</el-button>
                            </div>
                    </van-tab>
                  </van-tabs>
                <div class="login_3">
                    <span>没有账户?&nbsp;&nbsp;</span>
                    <span style="color:#E44F32;" @click="register"> 注册</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'

const router = useRouter()

const activeName=ref('1')

const handleClick=(tab, event)=>{
    // console.log(tab, event);
}

const register = () =>{
    router.push('/register')
}

const forgot = () =>{
    router.push('/forgot')
}

let query = ref ({
    account:"",
    password:""
})

const login = () => {
    axios.post("http://127.0.0.1:8000/home/login/", query.value).then(res=>{
        console.log(res)
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
            router.push('/home')
            localStorage.setItem('token',res.data.token)
            localStorage.setItem('userid',res.data.id)
        }
        if(res.data.code==201){
            ElMessage.success(res.data.msg)
        }
        if(res.data.code==201){
            ElMessage.error(res.data.msg)
            router.push('/register')
        }
    })
}

const phone = ref('')
const code = ref('')

const send = () =>{
    axios.post("http://127.0.0.1:8000/home/send/", {phone:phone.value}).then(res=>{
        // console.log(res)
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
            router.push('/home')
            localStorage.setItem('token',res.data.token)
            localStorage.setItem('userid',res.data.id)
        }
        if(res.data.code==201){
            ElMessage.success(res.data.msg)
        }
        else{
            ElMessage.error(res.data.msg)
            router.push('/register')
        }
    })
}

const codelogin = () =>{
    axios.post("http://127.0.0.1:8000/home/code/", {phone:phone.value,code:code.value}).then(res=>{
        // console.log(res)
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
            router.push('/home')
        }
        else{
            ElMessage.error(res.data.msg)
        }
    })
}
</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.login{
    width: 500px;
    height: 700px;
    margin-top: 180px;
}

.login_1{
    font-size: 25px;
    display: flex;
    flex-direction: column;
    margin-right: 250px;
}

.login_2{
    margin-top: 50px;
    text-align: center;
}

.login_2_1{
    margin-top: 30px;
}

.login_button button{
    width: 350px;
    height: 60px;
    margin-top:30px;
    background-color: #f1a698;
    color:#FFFFFF;
}

.login_3{
    margin-top: 180px;
    font-size: 18px;
}


.el-tabs__nav-wrap::after {
    display: none;
  }
  
  
  .el-tabs__active-bar {
    display: none;
  }
</style>